<template>
<!--  TODO 这个是旧版,如果出问题了就回滚用这个吧 -->
  <el-dialog title="权限设置" v-model="drawer" width="480px" :append-to-body="true" @close="close" center>
    <div style="display: flex; flex-direction: row; align-items: center;">
      <span style="width: 120px;text-align: right">当前文档权限：</span>
      <el-select v-model="docForm.docAuthority" placeholder="请选择权限等级" style="width:120px;" size="small" @change="docAuthorityChange">
        <el-option v-for="item in docAuthorityOption" :label="item.label" :value="item.value"/>
      </el-select>
      <el-tooltip
          class="box-item"
          effect="dark"
          content="文档权限优先级高于共享人权限"
          placement="top-start"
      >
        <el-icon style="position:relative;font-size: 18px;margin-left: 10px;top:0px">
          <ele-QuestionFilled/>
        </el-icon>
      </el-tooltip>
    </div>

    <div style="display: flex; flex-direction: row; align-items: center;margin: 10px 0 20px 0 ">
      <span style="width: 120px;text-align: right">选择分享的用户：</span>
      <el-select v-model="selectUsers" size="small" multiple placeholder="选择分享的用户" style="width: 200px">
        <el-option v-for="item in shareUserList" :key="item.id" :label="item.nickname + '-' + item.phone"
                   :value="item.id" />
      </el-select>
      <el-button type="primary" @click="submitShare" size="small" style="margin-left: 10px">添加</el-button>
    </div>

    <p v-if="list.invite == null || list.invite === ''" style="font-size: 20px;margin-top: 10px">当前暂无共享人</p>

    <el-descriptions
        v-else
        :column="2"
        border
        size="small"
    >
      <div v-for="(item,index) in list.invite" :key="index">
<!--        <el-descriptions-item label="用户ID">-->
<!--          {{item.id}}-->
<!--        </el-descriptions-item>-->
        <el-descriptions-item label="用户名">
          {{item.user}}
        </el-descriptions-item>
        <el-descriptions-item label="权限">
          <el-select v-model="item.permissions" placeholder="请选择权限等级" style="width:120px;" size="small" @change="userAuthorityChange">
            <el-option v-for="item in userAuthorityOption" :label="item.label" :value="item.value"/>
          </el-select>
        </el-descriptions-item>
<!--        <el-descriptions-item label="操作">-->
<!--          <el-button @click="remove(item)" icon="ele-Delete" size="small" type="danger">删除</el-button>-->
<!--        </el-descriptions-item>-->
      </div>

    </el-descriptions>

    <template #footer>
      <el-button size="small" @click="close" type="primary">关 闭</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {computed, reactive, toRefs} from "vue";
import {getByFileLogId, update} from "../../../api/sys/cooperate";
import {ElMessage} from 'element-plus'
import api from '/@/api/commonApi'

export default {
  name: "CooperateAuthority",
  props: {
    fileLogId: {
      type: String,
      default: null
    },
    dialogDrawer: {
      type: Boolean,
      default: false
    },
  },
  setup(props, context){
    const { dialogDrawer, fileLogId } = toRefs(props)
    let drawer = computed({
      get: () => {
        if (dialogDrawer.value){
          shareReset()
          getList()
        }
        return dialogDrawer.value;
      },
      set: val => {
        context.emit('update:dialogDrawer', val)
      }
    })
    const state = reactive({
      list:[],
      docForm:{
        docAuthority:null,

      },
      docAuthorityOption:[{label:'公共读写',value:0},{label:'公共读',value:1},{label:'仅邀请',value:2},{label:'私密的',value:3}],
      userAuthorityOption:[{label:'完全操作权限',value:'Full Access'},{label:'只读权限',value:'Read Only'},{label:'拒绝访问',value:'Deny Access'}],
      userAuthority:{},
      selectUsers:[],
      shareDocIds:[],
      currentIsCooperate:1, //是否为协同文档 0->否  1->是
      shareUserList:[],
    })

    //获取数据
    const getList = () => {
      getByFileLogId(fileLogId.value).then(res=>{
        state.docForm.docAuthority = res.data.docAuthority
        if(res.data.invite !== null && res.data.invite !== ''){
          res.data.invite = JSON.parse(res.data.invite);
        }
        state.list = res.data
      })
    }
    //修改文档权限
    const docAuthorityChange = (val) => {
      state.docForm.docAuthority = val
      update({id:state.list.id,docAuthority:state.docForm.docAuthority}).then(res=>{
        if(res.data){
          ElMessage.success('修改成功！')
        }
      })
    }
    //删除权限
    const remove = (row) => {

    }
    //添加共享人
    const submitShare = () => {
      api.addShareDoc({
        users: state.selectUsers,
        docIds: state.shareDocIds,
        isCooperate: state.currentIsCooperate
      }).then(res => {
        ElMessage.success("分享成功")
        shareReset()
        getList()
      })
    }
    //修改用户的文档权限
    const userAuthorityChange = () => {
      update({id:state.list.id,invite:JSON.stringify(state.list.invite)}).then(res=>{
        if(res.data){
          ElMessage.success('修改成功！')
        }
      })
    }
    // 分享框重置
    const shareReset = () => {
      state.shareDocIds = []
      state.selectUsers = []
      state.shareDocIds.push(fileLogId.value)
      api.shareDocUsers({ ids: state.shareDocIds + '' }).then(res => {
        state.shareUserList = res.data
      })
    }

    //关闭
    const close = () => {
      context.emit('update:dialogDrawer', false)
    }
    return{
      ...toRefs(state),
      drawer,
      dialogDrawer,
      fileLogId,
      close,
      getList,
      docAuthorityChange,
      remove,
      userAuthorityChange,
      submitShare,
      shareReset,

    }
  }
}
</script>

<style scoped>

</style>
